<template>

	<view>
		<view class="calendar">
			<wu-calendar :monthShowCurrentMonth="true" :insert="true" :type="type" :fold="fold" startWeek="mon"
				color="#FF8535" :selected="selected" @change="calendarChange" @monthSwitch="monthChange">
			</wu-calendar>
		</view>

		<view :class='["lesson", item.called ? "hover": ""]' v-for="(item, index) in courseList" :key="index"
			@click="handleClick(item)">
			<view class="title">
				<view class="ico_org"></view>
				<view class="time">
					{{ item.startTime }}-{{ item.endTime }}
				</view>
				<view class="teacher">
					<image class="ph" src="@/static/ico_head.png" mode="aspectFill"></image>
					<view class="text">{{ item.teacher }}</view>
				</view>
			</view>
			<view class="info">
				<view class="text">
					{{ item.project }}
				</view>
				<view class="text">
					{{ item.classname }}
				</view>
				<view class="text">
					{{ item.classroom }}
				</view>
				<view class="text">
					{{ item.classContent }}
				</view>
				<view class="weekly">
					{{ item.weekly }}
				</view>
				<image v-if="item.called" class="ico_call" src="@/static/ico_4.png" mode="widthFix"></image>
			</view>
			<view class="state">
				<block v-if="item.called">
					已点名:1/1(2课时)
				</block>
				<block v-else>
					未点名:1/1(2课时)
				</block>

			</view>
		</view>


	</view>

</template>


<script>
	
	import { request } from '@/utils/request';
	
	export default {
		name: "courseSchedule",
		props: {
			type: {
				type: String,
				default: "week"
			},
			fold: {
				type: Boolean,
				default: true
			},
			product: {
				type: [],
				default () {
					return {

					}
				}
			},
		},
		
		mounted() {
			let teacher = uni.getStorageSync("name");
			let now = new Date();
			let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			// strDate = now.getDate() // 获取当前日(1-31)
			if (month < 10) {
				month = `0${month}` // 如果月份是个位数，在前面补0
			}
			this.currFullDate = `${now.getFullYear()}-${month}`
			request({
		        url: 'http://192.168.0.111/xcx/course', // 替换为你的登录API接口
		        method: 'GET',
				data: {
					teacherId: uni.getStorageSync('user_id') || 230,
					date: this.currFullDate,
				}
			}).then(data => {
				let selected = []
				let monthCourseList = []
				for (let it of data) {
					let ait = {
						badgeColor: '#FF8535',
						badge: true,
						badgePosition: 'bottom-center',
						date: it.school_class_record_date
					}
					selected.push(ait)
					
					
					let bit = {
						id: it.school_class_record_id,
						startTime: it.school_class_schedule_time_start,
						endTime: it.school_class_schedule_time_end,
						teacher: teacher,
						project: it.school_courses_name,
						classname: it.school_class_name,
						classroom: it.school_room_name,
						classContent: "",
						weekly: "每周循环", // every_day 每天重复 every_other_day 隔天重复 every_week 每周重复 every_other_week 隔周重复
						called: it.school_class_record_status,
						date: it.school_class_record_date,
					}
					
					monthCourseList.push(bit)
					
				}
				this.selected = selected;
				this.monthCourseList = monthCourseList;
				
				let now = new Date();
				let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let strDate = now.getDate() // 获取当前日(1-31)
				if (month < 10) {
					month = `0${month}` // 如果月份是个位数，在前面补0
				}
				if (strDate < 10) {
					strDate = `0${strDate}` // 如果月份是个位数，在前面补0
				}
				let nowStr = `${now.getFullYear()}-${month}-${strDate}`
				this.courseList = monthCourseList.filter(it => it.date === nowStr)
				
		        
			}).catch(err => {
		        console.error('数据获取失败:', err);
		        uni.showToast({
					title: '数据获取失败',
					icon: 'none'
			    });
			});
		},
		getCurrentDate() {
			
		},
		data() {
			return {
				currFullDate: '',
				selected: [],
				
				monthCourseList: [],
				
				courseList: []
			};
		},
		methods: {
			handleClick(item) {
				uni.navigateTo({
					url: `${item.called ? '/pages/course/detail/detail' : '/pages/callInfo/callInfo'}?id=${item.id}`
				})
			},
			calendarChange(e) {	
				this.courseList = this.monthCourseList.filter(it => it.date === e.fullDate)
			},
			monthChange(e) {
				console.log(e)
				
				if (e.fullDate == this.currFullDate) {
					return;
				}
				
				this.currFullDate = e.fullDate;
				let teacher = uni.getStorageSync("name");
				
				request({
				    url: 'http://192.168.0.111/xcx/course', // 替换为你的登录API接口
				    method: 'GET',
					data: {
						teacherId: uni.getStorageSync('user_id') || 230,
						date: this.currFullDate,
					}
				}).then(data => {
					let selected = []
					let monthCourseList = []
					for (let it of data) {
						let ait = {
							badgeColor: '#FF8535',
							badge: true,
							badgePosition: 'bottom-center',
							date: it.school_class_record_date
						}
						selected.push(ait)
						
						
						let bit = {
							id: it.school_class_record_id,
							startTime: it.school_class_schedule_time_start,
							endTime: it.school_class_schedule_time_end,
							teacher: teacher,
							project: it.school_courses_name,
							classname: it.school_class_name,
							classroom: it.school_room_name,
							classContent: "",
							weekly: "每周循环", // every_day 每天重复 every_other_day 隔天重复 every_week 每周重复 every_other_week 隔周重复
							called: it.school_class_record_status,
							date: it.school_class_record_date,
						}
						
						monthCourseList.push(bit)
						
					}
					console.log(data);
					this.selected = selected;
					this.monthCourseList = monthCourseList;
					
					let now = new Date();
					let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
					let strDate = now.getDate() // 获取当前日(1-31)
					if (month < 10) {
						month = `0${month}` // 如果月份是个位数，在前面补0
					}
					if (strDate < 10) {
						strDate = `0${strDate}` // 如果月份是个位数，在前面补0
					}
					let nowStr = `${now.getFullYear()}-${month}-${strDate}`
					this.courseList = monthCourseList.filter(it => it.date === nowStr)
					
				    
				}).catch(err => {
				    console.error('数据获取失败:', err);
				    uni.showToast({
						title: '数据获取失败',
						icon: 'none'
				    });
				});
			},
		},
	}
</script>


<style lang="scss" scoped>
	.calendar {
		padding-bottom: 10rpx;
		background: #fff;
	}

	.ico_calendar {
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60rpx;
	}

	.lesson {
		margin: 20rpx 32rpx 0;
		background: #fff;
		border-radius: 8rpx;
		color: #3D3D3D;

		.state {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			border-top: 1px solid rgba(230, 229, 231, 0.8);
			font-size: 28rpx;
			font-weight: 500;
			color: #FF8535;
		}

		.info {
			padding: 10rpx 140rpx 10rpx 75rpx;
			position: relative;

			.ico_call {
				position: absolute;
				right: 0;
				bottom: -20rpx;
				width: 220rpx;
			}

			.text {
				padding: 8rpx 0;
				font-size: 24rpx;
				font-weight: normal;
				line-height: 38rpx;
			}

			.weekly {
				position: absolute;
				top: 20rpx;
				right: 40rpx;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			padding: 0 40rpx;
			border-bottom: 1px solid rgba(230, 229, 231, 0.8);

			.ico_org {
				flex-shrink: 0;
				width: 18rpx;
				height: 18rpx;
				background: #FF8535;
				border-radius: 50%;
				margin-right: 15rpx;
			}

			.time {
				width: 100%;
				font-size: 36rpx;
				font-weight: 500;
				line-height: 50rpx;
			}

			.teacher {
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.ph {
					width: 52rpx;
					height: 52rpx;
					flex-shrink: 0;
					margin-right: 10rpx;
				}

				.text {
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
		}

		&.hover {
			color: #aaa;

			.ph {
				opacity: 0.7;
			}

			.ico_org {
				background: #D8D8D8;
			}

			.state {
				color: #aaa;
			}
		}
	}

	.call_day {
		background: #fff;
		padding: 20rpx 40rpx;

		.week {
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;

			.item {
				padding-top: 15rpx;

				.name {
					font-size: 28rpx;
					font-weight: 500;
					line-height: 34px;
					color: #3D3D3D;
					opacity: 0.7;
				}

				.num {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 60rpx;
					color: #3D3D3D;
				}

				&.hover .num {
					color: #fff;
					background: #FF8535;
				}
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 38rpx;
			font-size: 28rpx;
			font-weight: 500;

			.years {
				color: #3D3D3D;
			}

			.today {
				color: #FF8535;
			}
		}
	}
</style>